<template>
	<view class="welfare-container">
		<uv-checkbox-group v-model="welfare" borderBottom labelSize="17" iconPlacement="right" placement="column">
			<uv-checkbox
				:name="item.id"
				:label="item.name"
				:customStyle="{ paddingTop: '15px' }"
				v-for="item in welfareList"
				:key="item.id"
			></uv-checkbox>
		</uv-checkbox-group>

		<view class="confirm bottom"><view class="button" @click="handleSubmit">保存</view></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getWelfareList, updateCompanyWelfare } from '@/apis/company/index.js';

export default {
	data() {
		return {
			welfare: [],
			welfareList: []
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	mounted() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getWelfareList({ page: 1, size: 999 });
			this.welfareList = res.data.list;
			const { welfare } = uni.getStorageSync('company');
			if (welfare && welfare.length) {
				this.welfare = welfare.map(item => item.id);
			}
		},
		async handleSubmit() {
			const res = await updateCompanyWelfare(this.userInfo.companyId, { welfare: this.welfare.join(',') });
			if (res.code === 200) {
				uni.showToast({ icon: 'success', title: '保存成功' });
				const time = setTimeout(() => {
					clearTimeout(time);
					uni.navigateBack();
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.welfare-container {
	position: relative;
	padding: 30rpx;
	padding-bottom: 135rpx;
}
</style>
